import React, { useEffect } from 'react';
import './Login.less';
import { Form, Input, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { setToken, getToken } from '../../utils/auth';
import { loginApi } from '@/api/login';
import { encrypt } from '@/utils/auth';
import { history } from 'umi';

export default function () {
  useEffect(() => {
    if (getToken()) {
      history.push('/home');
    }
  }, []);

  const [form] = Form.useForm();
  const subClick = async () => {
    const { userAccount, userPwd } = await form.validateFields();
    // console.log(userAccount, userPwd)
    const res = await loginApi({
      userAccount,
      userPwd: encrypt(userPwd),
    });
    if (res.data.code == 200) {
      setToken(userAccount);
      console.log(getToken());
      history.push('/home');
    } else {
      message.error(res.data.message);
    }
  };
  return (
    <div className="login-data">
      <div className="login-box">
        <div className="form-title"> 秦学后台管理 </div>
        <Form
          form={form}
          name="normal_login"
          className="login-form"
          initialValues={{
            userAccount: '18979307261',
            userPwd: 'zhhdzs129',
          }}
        >
          <Form.Item
            name="userAccount"
            rules={[
              {
                required: true,
                message: 'Please input your Username!',
              },
            ]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="Username"
              style={{ width: 320 }}
            />
          </Form.Item>
          <Form.Item
            name="userPwd"
            rules={[
              {
                required: true,
                message: 'Please input your Password!',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
              style={{ width: 320 }}
            />
          </Form.Item>
          <div className="login-button" onClick={subClick}>
            登录
          </div>
          <div className="login-text">使用手机小程序提示的账号密码登录 </div>
        </Form>
      </div>
    </div>
  );
}
